// 颜色变量
$primary-color: #2D6A4F;
$primary-light: rgba(45, 106, 79, 0.1);
$text-primary: #2D3748;
$text-secondary: #718096;
$background-light: #f8f9fa;
$white: #ffffff;

// 阴影
$shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 20px rgba(45, 106, 79, 0.15);

// 圆角
$border-radius-sm: 12px;
$border-radius-md: 16px;

// 间距
$spacing-xs: 6px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-2xl: 30px;
$spacing-3xl: 40px;

// 字体大小
$font-xs: 14px;
$font-sm: 16px;
$font-md: 18px;
$font-lg: 24px;
$font-xl: 28px;

// 动画
$transition-fast: 0.2s ease;
$transition-normal: 0.3s ease;
$transition-slow: 0.5s ease;

// 通用样式类
.text-primary {
  color: $primary-color;
}

.text-secondary {
  color: $text-secondary;
}

.bg-primary {
  background-color: $primary-color;
}

.bg-light {
  background-color: $background-light;
}

.shadow-hover {
  transition: box-shadow $transition-normal;
  &:hover {
    box-shadow: $shadow-md;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 动画类
.fade-in {
  animation: fadeIn $transition-normal forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scale-in {
  animation: scaleIn $transition-normal forwards;
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
} 